<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- <link href="css/style.css" rel="stylesheet"> -->
        <style>
             /*清除样式*/
            *{
                margin: 0;
                padding: 0;
            }
            body{
                height: 2000px;
            }
            #d1{
                width: 100px;
                height: 100px;
                background-color: cadetblue;
                border: chocolate solid 2px;
            }
            #d2{
                width: 100px;
                height: 100px;
                background-color: rgb(95, 160, 111);
                border: chocolate solid 2px;
                /*固定定位,固定定位是以眼睛看的到的页面为参照物,其实位置别人占了*/
                position:fixed;
                left: 300px;
                top: 150px;
                /*层级，正数越大靠用户越近*/
                z-index: 3;
            }
            #d3{
                width: 100px;
                height: 100px;
                background-color: rgb(178, 195, 196);
                border: chocolate solid 2px;
            }
            #d4{
                width: 100px;
                height: 100px;
                background-color: cadetblue;
                border: chocolate solid 2px;
            }
            #d5{
                width: 100px;
                height: 100px;
                background-color: rgb(95, 160, 111);
                border: chocolate solid 2px;
                /*相对定位，起始位置别人不占用*/
                position: relative;
                left:300px;
                /* top: 100px; */
                
            }
            #d6{
                width: 100px;
                height: 100px;
                background-color: rgb(178, 195, 196);
                border: chocolate solid 2px;
            }
            #d7{
                width: 300px;
                height: 300px;
                background-color: cadetblue;
                border: chocolate solid 2px;
            }
            #d8{
                width: 200px;
                height: 200px;
                background-color: rgb(95, 160, 111);
                border: chocolate solid 2px;
                /*相对定位，相对自己的其实位置，起始位置别人不占用*/
                position: relative;
                left:50px;
                top: 100px;
                
            }
            #d9{
                width: 100px;
                height: 100px;
                background-color: rgb(178, 195, 196);
                border: chocolate solid 2px;
                /*绝对定位，一般子绝父相*/
                position:absolute;
                left:10px;
                top:10px;
            }
            #d10{
                width: 50px;
                height: 50px;
                background-color: rgb(190, 69, 156);
                border: chocolate solid 2px;
                /*绝对定位，一般子绝父相*/
                position:absolute;
                left:10px;
                top:10px;
            }
            #box{
                position:relative;
                left: 10%;
                width: 80%;
                height: 700px;
                background-color: darkgray;
            }
            #topNav{
                position: absolute;
                width: 100%;
                height: 30px;
                background-color: darkgreen;
                margin-bottom: 10px;
            }
            #leftNav{
                position:absolute;
                top: 40px;
                width: 15%;
                height: 660px;
                background-color: darkolivegreen;
            }
            #main{
                position: absolute;
                top: 40px;
                left: 18%;
                width: 80%;
                height: 660px;
                background-color: darkslateblue;
            }
            
        </style>
    </head>
    <body>
        <div id="d1"></div>
        <div id="d2"></div>
        <div id="d3"></div>
        <hr/>
        <div id="d4"></div>
        <div id="d5"></div>
        <div id="d6"></div>
        <hr/>
        <div id="d7">
            <div id="d10"></div>
            <div id="d8">
                <div id="d9"></div>
            </div>
        </div>
        <hr></hr>
        <div id="box">
            <div id="topNav"></div>
            <div id="leftNav"></div>
            <div id="main"></div>
        </div>
    </body>
</html>